<!-- Copyright (c) 2019-2020 十三 all rights reserved. -->
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/api/user/css/common.css}">
    <link rel="stylesheet" th:href="@{/api/user/styles/login.css}">
    <link rel="stylesheet" th:href="@{/api/user/styles/header.css}">
    <link rel="stylesheet" th:href="@{/api/user/plugins/sweetalert/sweetalert.css}"/>
</head>
<body>
<div class="top center">
    <div class="logo center">
        <a href="./index.html" target="_blank"><img src="/api/user/image/uflower2.jpg" alt="" style="height: 110px"></a>
    </div>
</div>
<div id="form_outer" class="form_outer">
    <div class="form center">
        <div class="login">
            <div class="login_center">
                <div class="login_top">
                    <div class="left fl">用户登录</div>
                    <div class="right fr"><a href="register" target="_self">立即注册</a></div>
                    <div class="clear"></div>
                    <div class="under-line center"></div>
                </div>
                <form id="loginForm" onsubmit="return false;" action="user/login" th:action="@{user/login}" th:object="${loginVo}" method="post">
                    <div class="login_main center">
                        <div class="login-info">用户名:&nbsp;<input class="login-info-input" type="text" name="username"
                                                                 id="username" th:field="*{username}"
                                                                 placeholder="请输入你的用户名"/>
                        </div>
                        <div class="login-info">密&nbsp;&nbsp;&nbsp;&nbsp;码:&nbsp;<input class="login-info-input"
                                                                                        id="password"
                                                                                        type="password"
                                                                                        name="password"
                                                                                        th:field="*{password}"
                                                                                        placeholder="请输入你的密码"/></div>
                        <div class="login-info">
                            验证码:&nbsp;
                            <input class="login-info-input verify-code" type="text" name="verifyCode"
                                   placeholder="请输入验证码" id="verifyCode"/>
                            <img alt="单击图片刷新！" style="top: 11px;position: relative;"
                                 th:src="@{/api/user/getCode}" onclick="this.src=this.src+'?d='+new Date()*1">
                        </div>
                    </div>
                    <div class="login_submit">
                        <input class="submit" type="submit" onclick="login()" value="立即登录">
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
<!-- jQuery -->
<script th:src="@{/api/user/plugins/jquery/jquery.min.js}"></script>
<script th:src="@{/api/user/dist/js/public.js}"></script>
<script th:src="@{/api/user/plugins/sweetalert/sweetalert.min.js}"></script>
<script type="text/javascript">
    /**
     *设置 cookie 值的函数,创建一个函数用于存储访问者的名字
     *cname:名称，必须字母
     *cvalue：值
     *exdays：过期时间（天）
     * */
    var setCookie = function (cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires + ";path=/";
    };

    function login() {
        var username = $("#username").val();
        if (!validUserName(username)) {
            swal('请输入正确的登录名', {
                icon: "error",
            });
            return false;
        }
        var password = $("#password").val();
        if (!validPassword(password)) {
            swal('请输入正确的密码格式(6-20位字符和数字组合)', {
                icon: "error",
            });
            return false;
        }
        var verifyCode = $("#verifyCode").val();
        if (!validLength(verifyCode, 5)) {
            swal('请输入正确的验证码', {
                icon: "error",
            });
            return false;
        }
        //验证
        var params = $("#loginForm").serializeArray();
        // 转为json数据格式
        var obj = {};//分配内存空间
        for (var i = 0; i < params.length; i++) {//数据类型为"自定义类的字段名=数据"后台会自动对数据进行匹配
            obj[params[i].name] = params[i].value;
        }
        console.log(obj)
        var url = '/api/user/login';
        $.ajax({
            type: 'POST',//方法类型
            url: url,
            data: JSON.stringify(obj),  //请求参数，将对象转json字符串,
            contentType:'application/json;charset=UTF-8', //请求数据类型,
            success: function (result) {
                if (result.code === 0) {
                    window.location.href = '/api/user/index';
                } else {
                    swal(result.msg,{
                        icon: "error",
                    })
                }
            },
            error: function () {
                swal("操作失败", {
                    icon: "error",
                });
            }
        });
    }
</script>
<style type="text/css">
    .form .login .login_center .login-info .verify-code {
        width: 120px;
        height: 30px;
        padding: 5px 10px;
    }
</style>
</html>